<template>
  <div class="positions-container">
    <el-card>
      <div class="header">
        <h2>职位设置管理</h2>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" @click="showAddPositionDialog">添加职位</el-button>
          <el-button icon="el-icon-download" @click="exportPositionData">导出数据</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <el-table :data="positions" style="width: 100%">
        <el-table-column prop="name" label="职位名称" width="200" />
        <el-table-column prop="department" label="所属部门" width="200" />
        <el-table-column prop="currentCount" label="当前人数" width="120" />
        <el-table-column prop="maxCount" label="编制人数" width="120" />
        <el-table-column prop="vacancy" label="空缺人数" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.vacancy > 0 ? 'danger' : 'success'">
              {{ scope.row.vacancy }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="editPosition(scope.row)">编辑</el-button>
            <el-button
                size="small"
                :type="scope.row.status === '启用' ? 'danger' : 'success'"
                @click="togglePositionStatus(scope.row)"
            >
              {{ scope.row.status === '启用' ? '停用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑职位对话框 -->
    <el-dialog v-model="positionDialogVisible" :title="positionDialogTitle" width="50%">
      <el-form :model="positionForm" label-width="100px">
        <el-form-item label="职位名称" required>
          <el-input v-model="positionForm.name" placeholder="请输入职位名称" />
        </el-form-item>
        <el-form-item label="所属部门" required>
          <el-cascader
              v-model="positionForm.department"
              :options="departmentOptions"
              :props="{ checkStrictly: true, value: 'id', label: 'label' }"
              placeholder="选择所属部门"
          />
        </el-form-item>
        <el-form-item label="编制人数" required>
          <el-input-number v-model="positionForm.maxCount" :min="1" />
        </el-form-item>
        <el-form-item label="职位描述">
          <el-input v-model="positionForm.description" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="职位状态">
          <el-switch v-model="positionForm.status" active-text="启用" inactive-text="停用" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="positionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePosition">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Positions',
  setup() {
    const positionDialogVisible = ref(false)
    const positionDialogTitle = ref('添加新职位')
    const isEditing = ref(false)

    const positions = ref([
      {
        id: 1,
        name: '前端开发工程师',
        department: '技术部/前端组',
        currentCount: 8,
        maxCount: 10,
        vacancy: 2,
        status: '启用'
      },
      {
        id: 2,
        name: '后端开发工程师',
        department: '技术部/后端组',
        currentCount: 12,
        maxCount: 15,
        vacancy: 3,
        status: '启用'
      },
      {
        id: 3,
        name: 'UI设计师',
        department: '技术部/设计组',
        currentCount: 5,
        maxCount: 6,
        vacancy: 1,
        status: '启用'
      },
      {
        id: 4,
        name: '产品助理',
        department: '产品部',
        currentCount: 3,
        maxCount: 3,
        vacancy: 0,
        status: '停用'
      }
    ])

    const positionForm = reactive({
      id: null,
      name: '',
      department: [],
      maxCount: 1,
      description: '',
      status: true
    })

    const departmentOptions = ref([
      { id: 1, label: '总公司', children: [
          { id: 2, label: '技术部', children: [
              { id: 5, label: '前端组' },
              { id: 6, label: '后端组' }
            ]},
          { id: 3, label: '市场部' },
          { id: 4, label: '人力资源部' }
        ]}
    ])

    const showAddPositionDialog = () => {
      positionDialogTitle.value = '添加新职位'
      isEditing.value = false
      // 重置表单
      Object.assign(positionForm, {
        id: null,
        name: '',
        department: [],
        maxCount: 1,
        description: '',
        status: true
      })
      positionDialogVisible.value = true
    }

    const editPosition = (position) => {
      positionDialogTitle.value = '编辑职位'
      isEditing.value = true
      // 填充表单
      Object.assign(positionForm, {
        id: position.id,
        name: position.name,
        department: position.department.split('/'),
        maxCount: position.maxCount,
        description: position.description || '',
        status: position.status === '启用'
      })
      positionDialogVisible.value = true
    }

    const savePosition = () => {
      if (isEditing.value) {
        // 更新职位
        const index = positions.value.findIndex(p => p.id === positionForm.id)
        if (index !== -1) {
          positions.value[index] = {
            ...positions.value[index],
            name: positionForm.name,
            department: positionForm.department.join('/'),
            maxCount: positionForm.maxCount,
            description: positionForm.description,
            status: positionForm.status ? '启用' : '停用'
          }
        }
        ElMessage.success('职位更新成功')
      } else {
        // 添加新职位
        const newId = Math.max(...positions.value.map(p => p.id), 0) + 1
        positions.value.push({
          id: newId,
          name: positionForm.name,
          department: positionForm.department.join('/'),
          currentCount: 0,
          maxCount: positionForm.maxCount,
          vacancy: positionForm.maxCount,
          description: positionForm.description,
          status: positionForm.status ? '启用' : '停用'
        })
        ElMessage.success('职位添加成功')
      }
      positionDialogVisible.value = false
    }

    const togglePositionStatus = (position) => {
      const newStatus = position.status === '启用' ? '停用' : '启用'
      position.status = newStatus
      ElMessage.success(`职位已${newStatus}`)
    }

    const exportPositionData = () => {
      ElMessage.success('职位数据导出成功')
    }

    return {
      positionDialogVisible,
      positionDialogTitle,
      positions,
      positionForm,
      departmentOptions,
      showAddPositionDialog,
      editPosition,
      savePosition,
      togglePositionStatus,
      exportPositionData
    }
  }
}
</script>

<style scoped>
.positions-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-20 {
  margin-top: 20px;
}
</style>